<template>
  <div style="width:100%;height:calc( 100vh - 50px );">
    <base-map
      :location="location"
      @draw-over="drawOver"
    />
  </div>
</template>

<script>
import { addBase, addSiteLocations } from '@/api/base'
import BaseMap from './components/BaseMap'
import store from '@/store'

export default {
  name: 'BaseCreate',
  components: {
    BaseMap
  },
  data() {
    return {
      temp: store.getters.temp,
      location: store.getters.location
    }
  },
  methods: {
    formatLngLats(lngLats) {
      return lngLats.map(item => {
        return `${item.getLng()},${item.getLat()}`
      }).join('@')
    },
    drawOver(lngLats) {
      this.addBase(this.formatLngLats(lngLats))
    },
    addBase(lngLats) {
      addBase(this.temp).then(response => {
        const siteId = response.siteId
        this.addBaseLngLats(lngLats, siteId)
      })
    },
    addBaseLngLats(lngLats, siteId) {
      addSiteLocations({
        lngLats,
        siteId
      })
        .then(response => {
          this.$notify({
            title: '恭喜',
            message: '添加成功！',
            type: 'success',
            duration: 2000
          })
          // this.$router.go(0)// 强制刷新当前页面
          this.$router.push({
            path: '/base/item'
          })
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>

</style>
